<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" href="css/footer.css" media="screen" title="no title" charset="utf-8">
    <style media="screen">
        * {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", "Hiragino Sans GB";
        }

        .wrap {
            width: 100%;
        }

        .header {
            width: 990px;
            height: 60px;
            line-height: 60px;
            padding: 20px 0px 20px 0px;
            margin: 0 auto;
        }

        .header img {
            height: 100%;
            vertical-align: middle;
        }

        .header span {
            width: 110px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 25px;
            vertical-align: middle;
            display: inline-block;
            color: rgb(58, 58, 58);
        }

        .content {
            width: 100%;
            height: 475px;
            background-color: #ffc734;
        }

        .login_wrap {
            width: 990px;
            height: 475px;
            margin: 0 auto;
            position: relative;
        }

        .tu_img {
            width: 50%;
            height: 100%;
        }

        .tu_img img {
            width: 100%;
            height: 100%;
        }

        .login_page {
            width: 40%;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
        }

        .interface_wrap {
            height: 80%;
            background-color: white;
            margin-top: 47.5px;
        }

        .interface_header {
            width: 100%;
            height: 55px;
            line-height: 55px;
            font-size: 20px;
            text-align: center;
        }

        .interface_wrap hr {
            width: 100%;
            height: 1px;
            border: none;
            background-color: rgb(244, 244, 244);
        }

        .interface_middle {
            width: 356px;
            padding: 0px 20px 0px 20px;
        }
        /**/

        .show {
            width: 100%;
            height: 26px;
            box-sizing: border-box;
            margin: 20px 0px 20px 0px;
        }

        .show_color {
            border: 1px solid rgb(255, 229, 125);
            background: rgb(255, 246, 210);
            color: gray;
        }

        .img_small {
            height: 17px;
            background: url(source/register_img/11.png) no-repeat;
            background-size: 100% 100%;
        }

        .img_background {
            width: 16px;
            /*background: url(source/register_img/2.png) no-repeat;
            background-size: 100% 100%;*/
            border-radius: 8px;
            margin-left: 7px;
            margin-top: 5px;
            display: inline-block;
        }

        .show span {
            height: 26px;
            line-height: 26px;
            font-size: 12px;
            vertical-align: top;
            margin-left: 20px;
            margin-top: -1px;
            box-sizing: border-box;
            display: inline-block;
        }

        .label_wrap {
            width: 100%;
            height: 40px;
            border: 1px solid rgb(189, 189, 189);
            box-sizing: border-box;
            position: relative;
            margin-bottom: 20px;
        }

        .label_wrap label {
            width: 40px;
            height: 40px;
            background: url(source/register_img/8.png) no-repeat;
            display: inline-block;
        }

        .input_wrap {
            width: 300px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            box-sizing: border-box;
        }

        .input_wrap input {
            width: 100%;
            height: 20px;
            box-sizing: border-box;
            outline: 0;
            border: none;
            margin-top: 10px;
            font-size: 16px;
        }

        #passLabel {
            width: 40px;
            height: 40px;
            background: url(source/register_img/9.png) no-repeat;
            display: inline-block;
        }

        .safe_wrap span {
            font-size: 12px;
        }

        .safe_wrap a {
            font-size: 12px;
            float: right;
            cursor: pointer;
        }

        .safe_wrap a:hover {
            color: red;
        }

        .btn_wrap {
            width: 100%;
            height: 40px;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .btn_wrap button {
            width: 100%;
            height: 100%;
            line-height: 40px;
            outline: 0;
            border: none;
            background: rgb(228, 57, 60);
            color: white;
            font-size: 20px;
            letter-spacing: 20px;
            cursor: pointer;
            text-align: center;
        }

        .footerB{
            height: 44px;
            line-height: 44px;
            text-align: right;
        }

        .footerB a {
            vertical-align: middle;
            text-decoration: none;
            font-size: 14px;
            color: red;
            margin-right: 20px;
        }

        .footerB a span {
            width: 16px;
            height: 16px;
            border-radius: 8px;
            background: url(source/register_img/10.png) no-repeat;
            background-size: 100% 100%;
            vertical-align: text-top;
            margin-top: -1px;
            display: inline-block;
        }
        #fontA {
          font-size: 0.5rem;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <header class="header">
            <img src="source/register_img/login.jpg" alt="" />
            <span>欢迎登陆</span>
        </header>
        <div class="content">
            <div class="login_wrap">

                <div class="tu_img">
                    <img src="source/register_img/7.png" alt="" />
                </div>
                <div class="login_page">
                    <div class="interface_wrap">
                        <div class="interface_header">账户登录</div>
                        <hr>
                        <!-- 中间部分 -->
                        <div class="interface_middle">
                            <!-- 密码用户名错误时显示的信息 -->
                            <div class="show show_color">
                                <i class="img_small img_background"></i><span>公共场所不建议自动登录，以防账号丢失</span>
                            </div>
                            <!-- 用户 -->
                            <div class="label_wrap">
                                <label></label>
                                <div class="input_wrap">
                                    <input type="text" name="userName" value="" placeholder="用户名">
                                </div>
                            </div>
                            <!-- 密码 -->
                            <div class="label_wrap">
                                <label id="passLabel"></label>
                                <div class="input_wrap">
                                    <input type="password" name="passWord" value="" placeholder="密码">
                                </div>
                            </div>
                            <!-- 忘记密码和自动登录 -->
                            <div class="safe_wrap">
                                <span><input type="checkbox" name="name" value="">&nbsp&nbsp自动登录</span>
                                <a>忘记密码</a>
                            </div>
                            <!-- 登录按钮 -->
                            <div class="btn_wrap">
                                <button type="button" name="button">登录</button>
                            </div>

                        </div>
                        <hr>
                        <!-- 底部 -->
                        <div class="footerB">
                            <a href="register.html"><span></span>&nbsp&nbsp立即注册</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <ul >
                <li><a href="#">关于我们</a></li>|
                <li><a href="#">友情链接</a></li>|
                <li><a href="#">诚聘英才</a></li>|
                <li><a href="#">联系我们</a></li>|
                <li><a href="#">网站地图</a></li>|
                <li><a href="#">意见反馈</a></li>|
                <li><a href="#">帮助中心</a></li>|
                <li><a href="#">客服热线：123456789</a></li>
            </ul>
            <p id="fontA">
                Copyright © 2007-2016 Boqii.com All Rights Reserved 光橙（上海）信息科技有限公司 版权所有 沪ICP备13034501号-2 增值电信业务经营许可证：沪B2-20140120
            </p>
        </div>
    </div>
</body>

</html>
<script src="js/login.js" charset="utf-8"></script>
